<template>
  <div class="hall_box">
    <div class="hall_swipe">
      <mt-swipe :auto="4000" :speed="10">
        <mt-swipe-item><img src="../../static/images/swipe_02.jpg" alt="" /></mt-swipe-item>
        <mt-swipe-item><img src="../../static/images/swipe_03.jpg" alt="" /></mt-swipe-item>
        <mt-swipe-item><img src="../../static/images/swipe_04.jpg" alt="" /></mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="hall_card">
      <ul>
      <li  @click="goto(item.path)" v-for="(item, index) in list">{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    data () {
      return {
        list: [
          {
            path: 'freight',
            title: '运价计算'
          },
          {
            path: 'freight',
            title: '违章查询'
          },
          {
            path: 'freight',
            title: '保险服务'
          },
          {
            path: 'freight',
            title: '司机贷款'
          },
          {
            path: 'freight',
            title: '运价计算'
          },
          {
            path: 'freight',
            title: '违章查询'
          },
          {
            path: 'freight',
            title: '司机贷款'
          },
          {
            path: 'freight',
            title: '运价计算'
          },
        ]
      }
    },
    methods: {
      goto (path) {
        this.$router.goto(path)
      }
    }
  }
</script>
<style>
  .hall_swipe{ width: 100%; height: 200px; }
  .hall_swipe img{ width: 100%; height: auto; }
  .hall_card ul{ width: 100%; margin-top: 10px; padding: 0px;}
  .hall_card ul li{ width: 25%; float: left; list-style: none; text-align:center; padding: 8px 0px;}
</style>